import {
	ref
} from "vue"

// 过境客源 - 第一个图表
export function getSourceChartOneInfo() {
	const targetData = ref({})
	const opts = ref({
		padding: [0, 0, 0, 0],
		dataLabel: true,
		dataPointShape: true,
		enableScroll: true,
		background: '#104993',
		fontColor: '#ccc',
		legend: {
			show: true,
			lineHeight: 20,
			itemGap: 8, // legend 之间的间距
			fontSize: 10,
			position: 'top',
			fontColor: '#ccc',
			float: 'right',
		},
		xAxis: {
			axisLineColor: '#ccc',
			fontColor: '#ccc',
			disableGrid: true,
			itemCount: 5,
			scrollAlign: 'right'
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#ccc',
			splitNumber: 4,
			data: [{
				axisLine: false,
				fontColor: '#ccc',
				tofix: 3,
				unit: targetData.value.localEcharts?.unit
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			},
		}
	})
	const chartData = ref({})

	const setChartData = (resData) => {
		console.log('过客', resData)
		targetData.value = resData
		const chartDataNew = {
			categories: resData.localEcharts?.xaxisLabels,
			series: [{
					name: "实时过境客流量",
					color: '#3573FC',
					data: resData.totalEcharts?.yaxisLabels
				},
				{
					name: "本地人数",
					color: '#00FF19',
					data: resData.localEcharts?.yaxisLabels
				},
				{
					name: "推断游客数（实时）",
					color: '#FFCC00',
					data: resData.touristEcharts?.yaxisLabels
				}
			]
		};
		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 热门区域客流数据 - 历史数据
export function getHotareaHistoryChartInfo() {
	const opts = ref({
		padding: [0, 0, 0, 0],
		dataLabel: true,
		dataPointShape: true,
		enableScroll: true,
		fontColor: '#ccc',
		legend: {
			show: true,
			lineHeight: 14,
			fontSize: 12,
			position: 'top',
			float: 'right',
			fontColor: '#fff'
		},
		xAxis: {
			axisLineColor: '#fff',
			fontColor: '#fff',
			disableGrid: true,
			itemCount: 4,
			scrollAlign: 'right',
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#fff',
			splitNumber: 4,
			data: [{
				axisLine: false,
				fontColor: '#ccc',
				tofix: 3,
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			},
		}
	})
	const chartData = ref({})

	const setChartData = (resData) => {
		const chartDataNew = {
			categories: resData.xAxisLabels,
			series: [{
				name: '进入',
				data: resData.yInAxis,
				color: '#00FF2B'
			}, {
				name: '离开',
				data: resData.yOutAxis,
				color: '#FC9135'
			}]
		}
		chartData.value = chartDataNew
	}
	return {
		opts,
		chartData,
		setChartData
	}
}

/**
 * 入园趋势
 */
// 实时检票趋势
export function getTicketNowInfo() {
	const opts = ref({
		padding: [20, 0, 0, 0],
		dataLabel: false,
		dataPointShape: false,
		enableScroll: false,
		legend: {
			show: false,
			lineHeight: 20,
			fontSize: 12,
			position: 'top',
			fontColor: '#fff'
		},
		xAxis: {
			axisLineColor: '#fff',
			fontColor: '#fff',
			disableGrid: true
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#fff',
			data: [{
				axisLine: false,
				fontColor: '#ccc',
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom"
			}
		}
	})

	const chartData = ref({})

	const setChartData = (resData) => {
		const chartDataNew = {
			categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
			series: [{
					name: "成交量A",
					linearColor: [
						[
							0,
							"#1890FF"
						],
						[
							0.25,
							"#00B5FF"
						],
						[
							0.5,
							"#00D1ED"
						],
						[
							0.75,
							"#00E6BB"
						],
						[
							1,
							"#90F489"
						]
					],
					data: [15, 45, 15, 45, 15, 45]
				},
				{
					name: "成交量B",
					linearColor: [
						[
							0,
							"#91CB74"
						],
						[
							0.25,
							"#2BDCA8"
						],
						[
							0.5,
							"#2AE3A0"
						],
						[
							0.75,
							"#C4D06E"
						],
						[
							1,
							"#F2D375"
						]
					],
					data: [55, 85, 55, 85, 55, 85]
				},
				{
					name: "成交量C",
					linearColor: [
						[
							0,
							"#FAC858"
						],
						[
							0.33,
							"#FFC371"
						],
						[
							0.66,
							"#FFC2B2"
						],
						[
							1,
							"#FA7D8D"
						]
					],
					data: [95, 125, 95, 125, 95, 125]
				}
			]
		}

		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 历史检票趋势
export function getTicketHistoryInfo() {
	const opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [20, 0, 0, 0],
		dataLabel: false,
		dataPointShape: false,
		enableScroll: false,
		legend: {
			show: false,
			lineHeight: 20,
			fontSize: 12,
			position: 'top',
			fontColor: '#fff'
		},
		xAxis: {
			axisLineColor: '#fff',
			fontColor: '#fff',
			disableGrid: true
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#fff',
			data: [{
				axisLine: false,
				fontColor: '#ccc',
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom"
			}
		}
	})

	const chartData = ref({})

	const setChartData = (resData) => {
		const chartDataNew = {
			categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
			series: [{
					name: "成交量A",
					linearColor: [
						[
							0,
							"#1890FF"
						],
						[
							0.25,
							"#00B5FF"
						],
						[
							0.5,
							"#00D1ED"
						],
						[
							0.75,
							"#00E6BB"
						],
						[
							1,
							"#90F489"
						]
					],
					data: [15, 45, 15, 45, 15, 45]
				},
				{
					name: "成交量B",
					linearColor: [
						[
							0,
							"#91CB74"
						],
						[
							0.25,
							"#2BDCA8"
						],
						[
							0.5,
							"#2AE3A0"
						],
						[
							0.75,
							"#C4D06E"
						],
						[
							1,
							"#F2D375"
						]
					],
					data: [55, 85, 55, 85, 55, 85]
				},
				{
					name: "成交量C",
					linearColor: [
						[
							0,
							"#FAC858"
						],
						[
							0.33,
							"#FFC371"
						],
						[
							0.66,
							"#FFC2B2"
						],
						[
							1,
							"#FA7D8D"
						]
					],
					data: [95, 125, 95, 125, 95, 125]
				}
			]
		}

		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 入园趋势：性别饼状图
export function getSexChartInfo() {
	const opts = ref({
		rotate: false,
		rotateLock: false,
		padding: [5, 5, 5, 5],
		dataLabel: false,
		enableScroll: false,
		legend: {
			show: false,
			position: "right",
			lineHeight: 25
		},
		title: {
			name: "",
		},
		subtitle: {
			name: "",
		},
		extra: {
			ring: {
				ringWidth: 50,
				centerColor: '#000',
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
			}
		}
	})

	const chartData = ref({})

	const setChartData = (resData) => {
		const chartDataNew = {
			series: [{
				data: [{
						"name": "男性",
						"value": resData.malePass,
						color: '#0800FF',
						labelShow: false,
					},
					{
						"name": "女性",
						"value": resData.femalePass,
						labelShow: false,
						color: '#FD5E5E'
					}
				]
			}]
		};

		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 销售额数据趋势
export function getSalePriceChartInfo() {
	const opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [0, 0, 15, 0],
		dataLabel: false,
		dataPointShape: false,
		enableScroll: false,
		legend: {
			show: true,
			lineHeight: 20,
			fontSize: 12,
			position: 'top',
			fontColor: '#fff'
		},
		xAxis: {
			axisLineColor: '#fff',
			fontColor: '#fff',
			disableGrid: true
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#fff',
			data: [{
				axisLine: false,
				fontColor: '#ccc',
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			},
		}
	})

	const chartData = ref({
		series: []
	})

	const setChartData = (resData) => {
		const data = {
			categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
			series: [{
					name: "成交量A",
					linearColor: [
						[
							0,
							"#1890FF"
						],
						[
							0.25,
							"#00B5FF"
						],
						[
							0.5,
							"#00D1ED"
						],
						[
							0.75,
							"#00E6BB"
						],
						[
							1,
							"#90F489"
						]
					],
					setShadow: [
						3,
						8,
						10,
						"#1890FF"
					],
					data: [15, 45, 15, 45, 15, 45]
				},
				{
					name: "成交量B",
					data: [55, 85, 55, 85, 55, 85]
				},
				{
					name: "成交量C",
					linearColor: [
						[
							0,
							"#FAC858"
						],
						[
							0.33,
							"#FFC371"
						],
						[
							0.66,
							"#FFC2B2"
						],
						[
							1,
							"#FA7D8D"
						]
					],
					setShadow: [
						3,
						8,
						10,
						"#FC8452"
					],
					data: [95, 125, 95, 125, 95, 125]
				}
			]
		};
		console.log('执行。。')
		chartData.value = JSON.parse(JSON.stringify(data))
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 索道运营图表
export function getRopewayChartInfo() {
	const targetData = ref({})
	const opts = ref({
		padding: [0, 0, 0, 0],
		dataLabel: true,
		dataPointShape: true,
		enableScroll: true,
		fontColor: '#ccc',
		legend: {
			show: true,
			lineHeight: 20,
			fontSize: 12,
			position: 'top',
			float: 'right',
			fontColor: '#fff'
		},
		xAxis: {
			axisLineColor: '#fff',
			fontColor: '#fff',
			disableGrid: true,
			itemCount: 5,
			scrollAlign: 'right'
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#fff',
			data: [{
				axisLine: false,
				fontColor: '#ccc',
				tofix: 3,
				formatter: (value) => value + targetData.value.unit
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			},
		}
	})

	const chartData = ref({})

	const setChartData = (resData) => {
		targetData.value = resData
		const chartDataNew = {
			categories: resData?.xAxisLabels,
			series: [{
					name: "进入",
					data: resData.yUAxisLabel,
					color: '#FCBA35'
				},
				{
					name: "离开",
					data: resData.yDAxisLabel,
					color: '#35FC49'
				},
			]
		}

		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 客运分析 - 上山下山图表
export function getPassengerUpDownChartInfo() {
	const targetData = ref({})
	const opts = ref({
		padding: [10, 0, 0, 0],
		dataLabel: true,
		dataPointShape: true,
		enableScroll: true,
		fontColor: '#ccc',
		legend: {
			show: false,
			lineHeight: 20,
			fontSize: 12,
			position: 'top',
			float: 'right',
		},
		xAxis: {
			axisLineColor: '#fff',
			fontColor: '#fff',
			disableGrid: true,
			itemCount: 5,
			scrollAlign: 'right',
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#fff',
			splitNumber: 4,
			data: [{
				axisLine: false,
				fontColor: '#ccc',
				tofix: 3,
				formatter: (value) => value + targetData.value.unit
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			},
		}
	})

	const chartData = ref({})

	const setChartData = (resData) => {
		targetData.value = resData
		const chartDataNew = {
			categories: resData?.xaxisLabels,
			series: [{
				color: '#FF8000',
				data: resData?.yaxisLabels
			}]
		}

		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 车辆来源分析
export function getCarSourceChartInfo() {
	const targetData = ref({})
	const opts = ref({
		rotate: false,
		rotateLock: false,
		padding: [5, 5, 5, 5],
		dataLabel: true,
		enableScroll: false,
		title: {
			name: "",
			fontSize: 15,
			color: "#fff"
		},
		subtitle: {
			name: "",
			fontSize: 25,
			color: "#fff"
		},
		legend: {
			show: true,
			position: "left",
			float: 'top',
			lineHeight: 25,
			fontColor: '#fff',
		},
		extra: {
			ring: {
				ringWidth: 30,
				activeOpacity: 0.5,
				activeRadius: 10,
				borderWidth: 3,
				centerColor: '#104993',
				border: false,
			},
			markLine: {
				data: [{
					lineColor: '#fff',
					labelFontColor: '#fff',
				}]
			}
		}
	})

	const chartData = ref({})

	const setChartData = (resData) => {
		targetData.value = resData
		const chartDataNew = {
			series: [{
				data: resData.map(item => ({
					name: item.name,
					value: parseFloat(item.num),
					textColor: '#fff',
					legendText: `${item.name}: ${item.num}`
				}))
			}]
		}

		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 实时车流趋势
export function getRealtimeCarTrendChartInfo() {
	const targetData = ref({})
	const opts = ref({
		padding: [15, 0, 0, 0],
		dataLabel: true,
		dataPointShape: true,
		enableScroll: true,
		fontColor: '#ccc',
		legend: {
			show: false,
			lineHeight: 20,
			fontSize: 12,
			position: 'top',
		},
		xAxis: {
			axisLineColor: '#fff',
			fontColor: '#fff',
			disableGrid: true,
			itemCount: 5,
			scrollAlign: 'right',
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#fff',
			splitNumber: 4,
			data: [{
				axisLine: false,
				fontColor: '#ccc',
				unit: targetData.value.unit
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			}
		}
	})
	const chartData = ref({})
	const setChartData = (resData, colorArr = ['#00FF2B']) => {
		targetData.value = resData
		const chartDataNew = {
			categories: resData?.xaxisLabels,
			series: [{
				data: resData?.yaxisLabels,
				color: colorArr[0]
			}]
		}

		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 本地车流趋势
export function getLocalCarTrendChartInfo() {
	const targetData = ref({})
	const opts = ref({
		padding: [5, 0, 0, 0],
		dataLabel: true,
		dataPointShape: true,
		enableScroll: true,
		fontColor: '#ccc',
		legend: {
			show: true,
			lineHeight: 20,
			fontSize: 12,
			position: 'top',
			float: 'right',
		},
		xAxis: {
			axisLineColor: '#fff',
			fontColor: '#fff',
			disableGrid: true,
			itemCount: 5,
			scrollAlign: 'right',
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#fff',
			splitNumber: 4,
			data: [{
				axisLine: false,
				fontColor: '#ccc',
				unit: targetData.value.unit
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			}
		}
	})
	const chartData = ref({})
	const setChartData = (bdData, yyData) => {
		targetData.value = bdData
		const chartDataNew = {
			categories: bdData?.xaxisLabels,
			series: [{
				name: '本地车辆',
				data: bdData?.yaxisLabels,
				color: '#FC9135',
			}, {
				name: '运营车辆',
				data: yyData?.yaxisLabels,
				color: '#15D200'
			}]
		}

		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 车流量分析
export function getCarFlowChartInfo() {
	const targetData = ref({})
	const opts = ref({
		padding: [0, 0, 0, 0],
		dataLabel: true,
		dataPointShape: true,
		enableScroll: true,
		background: '#104993',
		fontColor: '#ccc',
		legend: {
			show: true,
			lineHeight: 20,
			fontSize: 12,
			position: 'top',
			float: 'right',
			fontColor: '#fff'
		},
		xAxis: {
			axisLineColor: '#ccc',
			fontColor: '#ccc',
			disableGrid: true,
			itemCount: 3,
			scrollAlign: 'right'
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#ccc',
			splitNumber: 4,
			data: [{
				axisLine: false,
				fontColor: '#ccc',
				tofix: 1,
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			},
		}
	})
	const chartData = ref({})

	const setChartData = (resData) => {
		targetData.value = resData
		const chartDataNew = {
			categories: resData?.xAxisLabels,
			series: [{
				name: "高峰",
				color: '#FC9135',
				data: resData.yAxisLabel
			}]
		};
		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 停车收费分析
export function getCarStopMoneyAnalysisChartInfo() {
	const targetData = ref({})
	const opts = ref({
		padding: [0, 0, 0, 0],
		dataLabel: true,
		dataPointShape: true,
		enableScroll: true,
		fontColor: '#ccc',
		legend: {
			show: true,
			lineHeight: 20,
			fontSize: 12,
			position: 'top',
			float: 'right',
			fontColor: '#fff'
		},
		xAxis: {
			axisLineColor: '#fff',
			fontColor: '#fff',
			disableGrid: true,
			itemCount: 3,
			scrollAlign: 'right',
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#fff',
			splitNumber: 4,
			data: [{
				axisLine: false,
				fontColor: '#ccc',
				tofix: 2,
				formatter: (value) => value + targetData.value.unit
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			},
		}
	})
	const chartData = ref({})
	const setChartData = (resData) => {
		targetData.value = resData
		const chartDataNew = {
			categories: resData?.xAxisLabels,
			series: [{
				name: "现金",
				data: resData.yAxisLabel,
				color: '#00FF2B'
			}, ]
		}
		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 收费方式分析
export function getCarMoneyWayChartInfo() {
	const targetData = ref({})
	const opts = ref({
		padding: [0, 0, 0, 0],
		dataLabel: true,
		dataPointShape: true,
		enableScroll: true,
		fontColor: '#ccc',
		legend: {
			show: true,
			lineHeight: 20,
			fontSize: 12,
			position: 'top',
			float: 'right',
			fontColor: '#fff'
		},
		xAxis: {
			axisLineColor: '#fff',
			fontColor: '#fff',
			disableGrid: true,
			itemCount: 3,
			scrollAlign: 'right',
		},
		yAxis: {
			gridType: "solid",
			gridColor: '#fff',
			splitNumber: 4,
			data: [{
				axisLine: false,
				fontColor: '#ccc',
				tofix: 3,
				formatter: (value) => value + targetData.value.unit
			}]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			},
		}
	})
	const chartData = ref({})
	const setChartData = (resData) => {
		targetData.value = resData
		const chartDataNew = {
			categories: resData?.xAxisLabels,
			series: [{
					name: "现金",
					data: resData.yCashAxis,
					color: '#0066FF'
				},
				{
					name: "银联",
					data: resData.yUpAxis,
					color: '#00DCFF'
				},
				{
					name: 'ETC',
					data: resData.yEtcAxis,
					color: '#DD00FF'
				},
				{
					name: '其他',
					data: resData.yOtherAxis,
					color: '#FFDF00'
				}
			]
		}

		chartData.value = chartDataNew
	}

	return {
		opts,
		chartData,
		setChartData
	}
}

// 客源比例饼状图 - 1
export function getUserRatioChartOneInfo() {
	const targetData = ref({})
	const opts = ref({
		rotate: false,
		rotateLock: false,
		padding: [5, 5, 5, 5],
		dataLabel: false,
		enableScroll: false,
		legend: {
			show: false,
			position: "right",
			lineHeight: 25
		},
		title: {
			name: "",
		},
		subtitle: {
			name: "",
		},
		extra: {
			ring: {
				ringWidth: 30,
				centerColor: '#000',
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
			}
		}
	})
	const chartData = ref({})

	const setChartData = (resData) => {
		const chartDataNew = {
			series: [{
				data: [{
						name: '本市',
						value: resData.city,
						color: '#00CCFF'
					},
					{
						name: '外市',
						value: resData.otherCity,
						color: '#FD5E5E'
					}
				]
			}]
		};

		chartData.value = chartDataNew
	}

	return {
		targetData,
		opts,
		chartData,
		setChartData
	}
}

// 客源比例饼状图 - 2
export function getUserRatioChartTwoInfo() {
	const targetData = ref({})
	const opts = ref({
		rotate: false,
		rotateLock: false,
		padding: [5, 5, 5, 5],
		dataLabel: false,
		enableScroll: false,
		legend: {
			show: false,
			position: "right",
			lineHeight: 25
		},
		title: {
			name: "",
		},
		subtitle: {
			name: "",
		},
		extra: {
			ring: {
				ringWidth: 30,
				centerColor: '#000',
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
			}
		}
	})
	const chartData = ref({})

	const setChartData = (resData) => {
		const chartDataNew = {
			series: [{
				data: [{
						name: '本省',
						value: resData.province,
						color: '#01FF89'
					},
					{
						name: '外省',
						value: resData.otherProvince,
						color: '#FFCC00'
					}
				]
			}]
		};

		chartData.value = chartDataNew
	}

	return {
		targetData,
		opts,
		chartData,
		setChartData
	}
}